<template>
  <div class="xq">
    <header>
      <div class="back" @click="$router.back()">
        <i class="icon-back"></i>
      </div>
      <div class="titel">
        {{SingerName}}
      </div>
      <div class="baimg" ref="bgimgss">
        <div class="baimg-sj" >
          <div>
            <i class="icon-play"></i>
            <span>随机播放</span>
          </div>
        </div>
      </div>
    </header>
    <section class="section" ref="section">
      <div>
        <ul>
          <li v-for="item of SingerXq" :key="item.mid" @click="addPlayList(item.mid)">
            <h2>{{item.name}}</h2>
            <p>{{SingerName}} - {{item.title}}</p>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll'
import {mapActions} from 'vuex'
export default {
  data() {
    return {
      SingerName:[],
      SingerXq:[]
    }
  },
  name:"Singerxq",
  created() {
    // console.log(this.$route.params.singer_mid)
    // console.log(this.$route.params.singer_pic)
    axios.get('/apig/cgi-bin/musicu.fcg',{
      params:{
        "-": "getUCGI7911892568506653",
        g_tk: 5381,
        loginUin: 0,
        hostUin: 0,
        format: "json",
        inCharset: "utf8",
        outCharset: "utf-8",
        notice: 0,
        platform:"yqq.json",
        needNewCode: 0,
        data: {
          "comm":{
            "ct":24,
            "cv":0
          },
          "singer":{
            "method":"get_singer_detail_info",
            "param":{
              "sort":5,
              "singermid":this.$route.params.singer_mid,
              "sin":0,
              "num":10
            },
            "module":"music.web_singer_info_svr"
          }
        }
      }
    })
    .then(res=>{
      // console.log(res.data.singer.data.singer_info.name)
      console.log(res.data.singer.data.songlist)
      this.SingerName=res.data.singer.data.singer_info.name
      this.SingerXq=res.data.singer.data.songlist
    })

    if(this.$route.params.singer_mid){
      console.log(this.$route.params.singer_mid)
    }else{
      this.$router.push("/Singer")
    }
  },
  mounted() {
    this.$refs.bgimgss.style.background="url("+this.$route.params.singer_pic+") no-repeat"
    this.$refs.bgimgss.style.backgroundSize="cover"
    this.scroll=new BScroll(this.$refs.section)
  },
  methods: {
    ...mapActions(["addPlayList"])
  },
}
</script>

<style lang="stylus" scoped>
  @import '~assets/stylus/variable.styl';
  .xq
    background #222
    position fixed
    top 0rem
    left 0rem
    right 0rem
    bottom 0rem
    z-index 50
    header
      position relative
      .back
        position absolute
        top .3rem
        left .3rem
        z-index 60
        i
          color $color-text
          font-size $font-sise-xs
      .titel
        color $color-text
        font-size $font-sise-xs
        position absolute
        top 0rem
        left 50%
        transform translateX(-50%)
        z-index 60
        padding-top .3rem
        text-align center
      .baimg
        position relative
        background #333
        width 100%
        padding-bottom 65%
        .baimg-sj
          position absolute
          bottom .3rem
          left 50%
          transform translateX(-50%)
          border 1px solid $color-text
          padding .2rem .3rem
          border-radius 60px
          div
            i
              color $color-text
              font-size $font-sise-xl
            span
              color $color-text
              font-size $font-sise-xl
    .section
      position absolute
      overflow hidden
      top 5.1rem
      left 0
      right 0
      bottom 0
      div
        ul
          li
            padding .01rem 0rem
            h2,p
              white-space nowrap
              width 90%
              font-size  $font-sise-xl
              text-overflow: ellipsis;
              overflow hidden
              text-indent .5rem
              margin .3rem 0rem
            p
              font-size $font-sise-md
              font-weight 500
              color $color-text-d
</style>
